<template>
  <div class="login-panel">
    <div class="tab_header">
      <el-tabs type="border-card" v-model="seclectTab"
      @tab-click="loginPaleFunction">
        <el-tab-pane name="account">
          <template #label>
            <span>
              <el-icon><user /></el-icon>
              <span style="margin-left:20px">账号登录</span>
            </span>
          </template>
          <div class="conatiner_login_account">
            <UserFormLogin1 ref="loginCount"></UserFormLogin1>
          </div>
        </el-tab-pane>
        <el-tab-pane name="phoneCount">
          <template #label>
            <span>
              <el-icon><unlock /></el-icon>
              <span style="margin-left:20px">手机号登录</span>
            </span>
          </template>
          <UserFormPass ref="userForm"></UserFormPass>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import UserFormLogin1 from './login_form.vue'
import UserFormPass from './login_pass.vue'
import { useStore } from 'vuex'
export default defineComponent({
  components: {
    UserFormLogin1,
    UserFormPass
  },
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  setup() {
    const loginCount = ref<InstanceType<typeof UserFormLogin1>>()
    const userForm = ref<InstanceType<typeof UserFormPass>>()
    const seclectTab = ref('account')
    const store = useStore()
    const loginPaleFunction = (isKeepLogin:boolean) => {
      console.log(seclectTab.value)
      if (seclectTab.value === 'account') {
        // 用户名登录
        loginCount.value?.loginCount(isKeepLogin)
      } else {
        console.log("手机号登录")
        store.dispatch('LoginModule/phoneLoginAction', 123)
      }
    }
    return {
      loginPaleFunction,
      loginCount,
      seclectTab,
      userForm
    }
  }
})
</script>
<style lang="less" scoped>
.login-panel {
  width: 320px;
  height: 200px;
}
 /deep/ .el-tabs__item {
  width: 160px !important;
}
.conatiner_login_account {

}
</style>
